window.addEventListener("load", function () {
	//功能一:海量API区移入移除交互思路:
	//1.获取相关节点
	// $("#apiList li")
	// console.log($("#apiList li"));

	let oldUrl = ""; //变量提升
	$("#apiList li").forEach(function (v) {
		//2.给li绑定移入事件
		v.addEventListener("mouseover", function () {
			//2-1.移入背景变蓝
			this.style.backgroundColor = "#2f7ee9";
			//2-2.移入字体变白
			this.style.color = "#fff";
			//2-3.移入图片,切换成白色透明的图
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl;
		});
		//3.移除事件
		v.addEventListener("mouseout", function () {
			//3-1.移出背景变白
			this.style.backgroundColor = "#fff";
			//3-2.移入字体变黑
			this.style.color = "#000";
			//3-3.移出,切换原来的图
			this.firstElementChild.src = oldUrl;
		});
	});


	// 功能二：独角兽区轮播图思路：
	// 将多个图文结构unicornCont全部叠在一个区域， 每隔3s让其他一个显示，其他不显示
	// 1.获取相关节点
	const unicornConts = $(".unicornCont");
	unicornConts[0].style.opacity = "1"; // 默认显示第0个
	let index = 1; // 设置索引变量
	// 2.设置周期定时器每隔3秒显示
	this.window.setInterval(function () {
		// 3.排他思想，不管当前谁显示，每一个周期都先让所有消失
		unicornConts.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 4.通过索引显示对应内容，其他不显示
		unicornConts[index].style.opacity = "1";
		// 5.每隔一个周期索引变量就++
		index++;
		// 6.当索引达到最大限度时要回复初始状态
		if (index > unicornConts.length - 1) {
			index = 0;
		}
	}, 3000);

	//功能三:回到顶部
	// 思路:1.获取相关节点
	$("#goback")
	//滚动条
	// Window.addEventListener("scroll",function(){
	// 	console.log(Window.scrollY);
		
	// })
	//2.绑定点击事件
	$("#goback").addEventListener("click",function(){
		window.scrollTo({left:0,top:0,behavior:"smooth"})
	})














	// 轮播图
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		//分页器(下面小圆点)
		pagination: {
			el: ".swiper-pagination", //开启分页器
			clickable: true, //开启点击功能
		},
	});

	//如果.你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	// new Swiper(".swiper");
	// var mySwiper = document.querySelector(".swiper").swiper;
	// mySwiper.slideNext();
});
